home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2009 February / PCWFEB09.iso / Software / Resources / Chat & Communication / PeerAware 1.03 / PeerAware-Setup.exe / Html / scripts / richdraw.js < prev    next >
Encoding:
JavaScript  |  2008-09-07  |  66.8 KB  |  2,302 lines
  1. /* ***** BEGIN LICENSE BLOCK *****
  2.  
  3. This code has been relicensed under LGPL as permitted by original license.
  4.  
  5. Copyright Cumulate Draw Editor
  6.  
  7. This library is free software; you can redistribute it and/or
  8. modify it under the terms of the GNU Lesser General Public
  9. License as published by the Free Software Foundation; either
  10. version 2.1 of the License, or (at your option) any later version.
  11.  
  12. This library is distributed in the hope that it will be useful,
  13. but WITHOUT ANY WARRANTY; without even the implied warranty of
  14. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  15. Lesser General Public License for more details.
  16.  
  17. You should have received a copy of the GNU Lesser General Public
  18. License along with this library; if not, write to the Free Software
  19. Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA 
  20.  * ***** END LICENSE BLOCK ***** */
  21.  
  22. /**
  23. *RichDrawEditor: the idea is to provide an abstract editor interface which
  24. *manipulates vml or svg renderers,
  25. *
  26. *constructor, set up initial values for state variables and add listeners
  27. **/
  28.  
  29.  
  30. function RichDrawEditor(elem, renderer) {
  31.   gApplication = new Application();
  32.   this.initialized=false;
  33.   this.iUser='';
  34.   this.container = elem;
  35.   this.page=$("_page");
  36.   this.width=700;
  37.   this.height=700;
  38.   this.DEFAULT_PAGE_WIDTH=700;
  39.   this.DEFAULT_PAGE_HEIGHT=700;
  40.   this.MAX_WIDTH=2000;
  41.   this.MAX_HEIGHT=2000;
  42.   this.gridX = 1;
  43.   this.gridY = 1;
  44.   this.mouseDownX = 0;
  45.   this.mouseDownY = 0;
  46.   this.prevZoom=1.0;
  47.   this.zoom=1.0;
  48.   this.prevWidth=0;
  49.   this.prevHeight=0;
  50.   this.prevLeft=0;
  51.   this.prevTop=0;
  52.   this.prevRotation=0;
  53.   this.prevMode='';
  54.   this.mode = 'select';
  55.   this.resizeMode='';//possible values are left-stretch, right-stretch,top-stretch,bottom-stretch
  56.   this.fillColor = '';
  57.   this.lineColor = '';
  58.   this.lineWidth = '';
  59.   this.lineStyle='none';
  60.   this.opacity='1.0';
  61.   this.gradient='solid';
  62.   this.linedashstyle='solid';
  63.   this.shadowOn="false";
  64.   this.shiftMode=false;
  65.   this.selected = null;
  66.   //the current shape which is under line draw!!!
  67.   this.lineActiveShape=null;
  68.   this.dragStarted=false;
  69.   this.textEditMode=false;
  70.   this.textToolBeginNew=true;
  71.   this.resizeCounter=0;
  72.   this.dragCounter=0;
  73.   var font=new Object();
  74.   font.size='';
  75.   font.family='';
  76.   font.color='';
  77.   font.align='';
  78.   font.italics='';
  79.   font.bold='';
  80.   this.fillUpFont(font);
  81.   this.font=font;
  82.   this.shapeProps=new Array();
  83.   this.shapeProps["table"]=$("_shapeTable");
  84.   this.shapeProps["x"]=$("_x");
  85.   this.shapeProps["y"]=$("_y");
  86.   this.shapeProps["width"]=$("_width");
  87.   this.shapeProps["height"]=$("_height");
  88.   this.shapeProps["rotation"]=$("_rotation");
  89.   this.lineProps=new Array();
  90.   this.lineProps["table"]=$("_connectorTable");
  91.   this.lineProps["x1"]=$("_x1");
  92.   this.lineProps["x2"]=$("_x2");
  93.   this.lineProps["y1"]=$("_y1");
  94.   this.lineProps["y2"]=$("_y2");
  95.   this.lineProps["type"]=$("_lineType");
  96.   this.pageProps=new Array();
  97.   this.pageProps["table"]=$("_pageTable");
  98.   this.pageProps["x"]=$("_pageX");
  99.   this.pageProps["y"]=$("_pageY");
  100.   this.pageProps["width"]=$("_pageWidth");
  101.   this.pageProps["height"]=$("_pageHeight");
  102.   //one day we will allow multiple objects in the clipboard
  103.   this.clipboard=null;
  104.   this.selectedBounds = { x:0, y:0, width:0, height: 0 };
  105.  
  106.   this.onselect = function() {}
  107.   this.onunselect = function() {}
  108.   //initialize the renderer
  109.   this.renderer = renderer;
  110.   this.renderer.init(this.container);
  111.  
  112.   this.onMouseDownListener = this.onMouseDown.bindAsEventListener(this);
  113.   this.onMouseUpListener = this.onMouseUp.bindAsEventListener(this);
  114.   this.onDragListener = this.onDrag.bindAsEventListener(this);
  115.   this.onDrawListener = this.onDraw.bindAsEventListener(this);
  116.  
  117.   this.onHitListener = this.onHit.bindAsEventListener(this);
  118.  
  119.  
  120.   this.onSelectStartListener = this.onSelectStart.bindAsEventListener(this);
  121.   this.onMouseOverListener=this.onMouseOver.bindAsEventListener(this);
  122.   this.onMouseOutListener=this.onMouseOut.bindAsEventListener(this);
  123.   this.onShapeMouseOutListener=this.onShapeMouseOut.bindAsEventListener(this);
  124.   this.onShapeMouseEnterListener=this.onShapeMouseEnter.bindAsEventListener(this);
  125.   this.onKeyPressListener=this.onKeyPress.bindAsEventListener(this);
  126.   this.onKeyUpListener=this.onKeyUp.bindAsEventListener(this);
  127.   this.onDblClickListener=this.onDblClick.bindAsEventListener(this);
  128.   this.onTextEditEndListener=this.onTextEditEnd.bindAsEventListener(this);
  129.   Event.observe(this.container, "mousedown", this.onMouseDownListener);
  130.   Event.observe(this.container, "mouseup", this.onMouseUpListener);
  131.   Event.observe(this.container,"mouseout",this.onMouseOutListener);
  132.   Event.observe(this.container, "selectstart", this.onSelectStartListener);  
  133.   Event.observe(this.container.ownerDocument,'keypress',this.onKeyPressListener);
  134.   Event.observe(this.container.ownerDocument,'keyup',this.onKeyUpListener);
  135. }
  136.  
  137. /**
  138. *setup initial values for the font
  139. **/
  140. RichDrawEditor.prototype.fillUpFont=function(font){
  141.         if(font.size=='')
  142.             font.size=16;
  143.         if(font.family=='')
  144.             font.family="'arial'";
  145.         if(font.italics=='')
  146.             font.italics="normal";
  147.         if(font.bold=='')
  148.             font.bold="normal"
  149.         if(font.align=='')
  150.             font.align="center";
  151.         if(font.color=='')
  152.             font.color="black";
  153.             
  154.  
  155. }
  156.  
  157. /**
  158. *Initialized the workspace
  159. **/
  160. RichDrawEditor.prototype.initializationDone = function() {
  161.     this.initialized=true;
  162. };
  163.  
  164.  
  165. /**
  166. *clear the workspace
  167. **/
  168. RichDrawEditor.prototype.clearWorkspace = function() {
  169.     this.container.innerHTML = '';
  170.     
  171. };
  172. /******************************begin cut/copy/paste/delete operations***********************************/
  173. /**
  174. *delete the selection and remove the trackers
  175. **/
  176. RichDrawEditor.prototype.deleteSelection = function() {
  177.   
  178.   if (this.selected) {
  179.     //remove all tracker components!!
  180.     if($('tracker-group')){
  181.     
  182.      Event.stopObserving($('tracker-group'),"mouseover",this.onMouseOverListener);
  183.     }
  184.      Event.stopObserving(this.selected,"dblclick",this.onDblClickListener);
  185.     this.renderer.remove(this.container.ownerDocument.getElementById('tracker-group'));
  186.     this.renderer.remove(this.selected);
  187.     this.selected = null;
  188.     //this.updateShapeInfo(null);
  189.   }
  190.   else{
  191.     setHelp("Select a shape to delete");
  192.   }
  193. };
  194.  
  195. /**
  196. *copy and then delete the selection
  197. **/
  198. RichDrawEditor.prototype.cut=function(){
  199.     if(this.selected){
  200.         this.copy();
  201.         this.deleteSelection();    
  202.         this.unselect();
  203.     }
  204.     else{
  205.         setHelp("Nothing to cut,Please select a shape first");
  206.     }
  207. };
  208.  
  209. /**
  210. *Save to the clipboard
  211. */
  212.  
  213. RichDrawEditor.prototype.copyToRemote=function(){
  214.     if(this.selected){
  215.         return this.renderer.copy(this.selected);
  216.     }
  217.     return null;
  218. };
  219.  
  220. RichDrawEditor.prototype.copy=function(){
  221.     if(this.selected){
  222.         //I know this is weird but clone node does not seem to work,so we copy the outer html
  223.         this.clipboard=this.renderer.copy(this.selected);
  224.     }
  225.     else{
  226.         setHelp("Nothing to copy,Please select a shape first");
  227.     }
  228. };
  229.  
  230. /**
  231. *paste function
  232. *wierd IE bug which forces us to set zindex of lines to 0 until they are added
  233. *nodeArray[i].getElementsByTagName("line")[0].style.zIndex=0;
  234. *another wierdness is that polyline.points.value does not correspond to polyline.points.item(x).value, so we
  235. * first set the points to 0,0, then add them to the container and then set the orignal points which we preserved
  236. * during copy, where we called savePolyLinePath
  237. **/
  238. RichDrawEditor.prototype.paste=function(){
  239.     
  240.     if(this.clipboard!=null){
  241.         var node=this.renderer.paste(this.clipboard);
  242.         //add listener to added child
  243.         this.addNewShapeListeners(node);
  244.         this.clipboard=this.renderer.copy(node);
  245.         return node;
  246.     }
  247.     else{
  248.         setHelp("Nothing to paste,Use copy or cut on selected shape");
  249.     }
  250.  
  251. }
  252.  
  253. /**
  254. * a utility function to add all the required listener after a new shape has been 
  255. * added
  256. **/
  257. RichDrawEditor.prototype.addNewShapeListeners=function(shape){
  258.     if(!shape)return;
  259.     Event.observe(shape, "mousedown", this.onHitListener); 
  260.     
  261.     Event.observe(shape,"mouseover",this.onShapeMouseEnterListener);
  262.     Event.observe(shape,"mouseout",this.onShapeMouseOutListener);
  263. }
  264.  
  265.  
  266. /****END DELETE, CUT,COPY,PASTE functions*****************/
  267. /****************BRING TO FRONT/BACK FUNCTIONS*************************/
  268. /**
  269. *bring to front,the listeners are refreshed since in SVG there is no real z-index operation, so 
  270. *we remove and readd!
  271. *@param shape
  272. **/
  273. RichDrawEditor.prototype.bringToFront=function(shape){
  274.     var subject=(shape)?shape:this.selected;
  275.     subject=this.renderer.bringToFront(subject);
  276.     if(subject){
  277.         this.addNewShapeListeners(subject);
  278.         this.select(subject);
  279.     }
  280. }
  281. /**
  282. *send to back, the listeners are refreshed since in SVG there is no real z-index operation, so 
  283. *we remove and readd!. 
  284. *@param shape
  285. **/
  286. RichDrawEditor.prototype.sendToBack=function(shape){
  287.  
  288.     var subject=(shape)?shape:this.selected;
  289.     var subject=this.renderer.sendToBack(subject);
  290.     if(subject){
  291.         this.addNewShapeListeners(subject);
  292.         this.select(subject);
  293.     }
  294. }
  295. /*********************END BRING TO FRONT/BACK FUNCTIONS**********************/
  296.  
  297. /**
  298. * select and show tracker
  299. **/
  300. RichDrawEditor.prototype.select = function(elem) {
  301.   if (elem == this.selected)
  302.     return;
  303.  
  304.   this.selected = elem;
  305.   var tracker=this.renderer.showTracker(this.selected);
  306.   Event.observe(tracker,"mouseover",this.onMouseOverListener);
  307.   // if(!this.renderer.isConnector(this.selected)){
  308.     Event.observe(this.selected,"dblclick",this.onDblClickListener);
  309.   //}
  310.   setHelp("To move the shape, drag it. To resize, use resize boxes.<b>To Set Text, double click</b>"); 
  311.   this.onselect(this);
  312.   this.updateShapeInfo(this.selected);
  313. };
  314.  
  315. /**
  316. *unselect and remove tracker, 
  317. *if text is being edited, end that operation.
  318. **/
  319. RichDrawEditor.prototype.unselect = function() {
  320.     
  321.   if (this.selected!=null) {
  322.     if(this.textEditMode){
  323.         this.finishTextEdit();
  324.         this.textEditMode=false;
  325.     }
  326.     if(this.mode!="text"){
  327.         this.textModeBeginNew=false;
  328.     }
  329.     Event.stopObserving(this.selected,"dblclick",this.onDblClickListener);
  330.     this.selected = null;
  331.     this.onunselect(this);
  332.     Event.stopObserving(this.container,"mouseover",this.onMouseOverListener);
  333.     
  334.     this.updateShapeInfo(null);
  335.     if(this.container.ownerDocument.getElementById('tracker-group')!=null){
  336.         this.renderer.remove(this.container.ownerDocument.getElementById('tracker-group'));
  337.         
  338.         
  339.     }
  340.     
  341.     var activeShapeTracker=$("active-shape-tracker");
  342.     if(activeShapeTracker)
  343.         this.renderer.remove(activeShapeTracker);
  344.   }
  345.       var lineTracker=$("line-tracker");
  346.       if(lineTracker){
  347.           this.renderer.remove(lineTracker);
  348.       }
  349. }
  350. /***************************************TEXT related functions************************/
  351. /**
  352. *this is called when a shape is double clicked, 
  353. *it displays the text box for the selected shape 
  354. **/
  355. RichDrawEditor.prototype.onDblClick=function(event){
  356.     if(!this.selected){
  357.         return false;
  358.     }
  359.     
  360.     else{
  361.         this.startTextEdit(this.selected);
  362.     }
  363. }
  364.  
  365. /**
  366. *start the text editing
  367. *@param {shape} the shape
  368. **/
  369. RichDrawEditor.prototype.startTextEdit=function(shape){
  370.  
  371.     setHelp("Enter your text and then click anywhere outside the text area");
  372.     var text=$('__shapeText');
  373.     var textString=this.renderer.getShapeText(shape);
  374.     if(textString){
  375.         text.value=textString;
  376.     }
  377.     else{
  378.         text.value="";
  379.     }
  380.     text.style.visibility="visible";
  381.     var bounds=this.renderer.getTextBounds(shape,"",this.zoom);
  382.     text.style.marginLeft=bounds.x>3?(bounds.x-3):0;
  383.     text.style.marginTop=bounds.y>3?(bounds.y-3):0;
  384.     if(bounds.width>=35){
  385.         text.style.width=parseInt(bounds.width)+6;
  386.     }
  387.     else{
  388.         text.style.width=35;
  389.     }
  390.     if(bounds.height>=35){
  391.         text.style.height=parseInt(bounds.height)+6;
  392.     }
  393.     else{
  394.         text.style.height=35;
  395.     }
  396.     
  397.     this.setTextAreaFont(text);
  398.     
  399.     this.renderer.remove(text);
  400.     this.container.appendChild(text);
  401.     text.focus();
  402.     text.style.zIndex=this.renderer.maxIndex;
  403.      Event.stopObserving(this.container, "mousedown", this.onMouseDownListener);
  404.     Event.stopObserving(this.container, "mouseup", this.onMouseUpListener);
  405.     Event.stopObserving(this.container, "selectstart", this.onSelectStartListener);  
  406.     Event.stopObserving(this.container,'keypress',this.onKeyPressListener);
  407.     Event.stopObserving(this.container,'keyup',this.onKeyUpListener);
  408.     Event.stopObserving(this.container, "mousemove", this.onDragListener);  
  409.     Event.observe(this.container,'mousedown',this.onTextEditEndListener);
  410.     setTimeout("c.manageTextSize()",100);
  411.     this.textEditMode=true;
  412. }
  413. /**
  414.  * manage the size of the text area based on size of the text being entered
  415.  */
  416. RichDrawEditor.prototype.manageTextSize=function(){
  417.     if(!this.selected||(!this.renderer.isConnector(this.selected)&&(!this.selected.getElementsByTagName("text-bound")>0)))return;
  418.     var text=$('__shapeText');
  419.     if(!text.style.visibility=="visible")return;
  420.     var bounds=this.renderer.getTextBounds(this.selected,text.value,this.zoom);
  421.     text.style.marginLeft=bounds.x>3?(bounds.x-3):0;
  422.     text.style.marginTop=bounds.y>3?(bounds.y-3):0;
  423.     if(bounds.width>=35){
  424.         text.style.width=parseInt(bounds.width)+6;
  425.     }
  426.     else{
  427.         text.style.width=35;
  428.     }
  429.     if(bounds.height>=35){
  430.         text.style.height=parseInt(bounds.height)+6;
  431.     }
  432.     else{
  433.         text.style.height=35;
  434.     }
  435.     setTimeout("c.manageTextSize()",100);
  436. }
  437. /**
  438. *basically set the font of the test area based on either 
  439. *the currently selected shape's font properties or the default
  440. *if the current shape is empty
  441. **/
  442. RichDrawEditor.prototype.setTextAreaFont=function(text){
  443.     var shapeFont=this.renderer.getFont(this.selected);
  444.         if(shapeFont.size!=''){
  445.             text.style.fontSize=(shapeFont.size*this.zoom);
  446.         }
  447.         else{
  448.             text.style.fontSize=(this.font.size*this.zoom);
  449.         }
  450.         
  451.         if(shapeFont.color!=''){
  452.             text.style.strokecolor=shapeFont.color;
  453.             text.style.color=shapeFont.color;
  454.         }
  455.         else{
  456.             text.style.strokecolor=this.font.color;
  457.             text.style.color=this.font.color;
  458.         }
  459.         if(shapeFont.family!=''){
  460.             text.style.fontFamily=shapeFont.family;
  461.         
  462.         }
  463.         else{
  464.             text.style.fontFamily=this.font.family;
  465.         }
  466.         if(shapeFont.bold!=''){
  467.             
  468.             text.style.fontWeight=shapeFont.bold;
  469.         }
  470.         else{
  471.             text.style.fontWeight=this.font.bold;
  472.         }
  473.         if(shapeFont.italics!=''){
  474.             text.style.fontStyle=shapeFont.italics;
  475.         }
  476.         else{
  477.             text.style.fontStyle=this.font.italics;
  478.         }
  479.  
  480. }
  481. /**
  482. *called when user clicks an area other than the active text area, 
  483. *signals end of text editing, time to set the text in the shape
  484. **/
  485. RichDrawEditor.prototype.onTextEditEnd=function(event){
  486.     if(!this.selected||!this.textEditMode||!event){
  487.         return;
  488.     }
  489.     else{
  490.         
  491.         var source=Event.element(event);
  492.         if(event&&source&&source.id=="__shapeText"){
  493.             return;
  494.         }
  495.         this.finishTextEdit();
  496.         this.unselect();
  497.     }
  498.  
  499.  
  500. };
  501. /**
  502. *this method should be called when we want to force the text edit operation to end
  503. **/
  504. RichDrawEditor.prototype.finishTextEdit=function(){
  505.         setHelp("Finished editing text");
  506.         var shapeText=$('__shapeText');
  507.         var text=shapeText.value;
  508.         if(!text||text.length==0)text=" ";
  509.         this.clearShapeText();
  510.         var shapeFont=this.renderer.getFont(this.selected);
  511.         this.renderer.setShapeText(this.selected,text,this.font,false,shapeFont,this.zoom);
  512.     if(this.mode=="text"&&!this.textToolBeginNew)
  513.     {
  514.         var transmitData = this.copyToRemote();
  515.         if (transmitData != null)
  516.             gApplication.transmit('w', "cpy " + transmitData);
  517.     }
  518.     else
  519.         gApplication.transmit('w', 'cmd txt txt ' + this.selected.id + ' ' + text);
  520.         
  521.         if(!this.renderer.isConnector(this.selected)){
  522.             this.resetTextForAttachedConnectors(this.selected);
  523.         }
  524.         shapeText.style.visibility="hidden";
  525.         this.textEditMode=false;
  526.         Event.observe(this.container, "mousedown", this.onMouseDownListener);
  527.         Event.observe(this.container, "mouseup", this.onMouseUpListener);
  528.         Event.observe(this.container, "selectstart", this.onSelectStartListener);  
  529.         Event.observe(this.container,'keypress',this.onKeyPressListener);
  530.         Event.observe(this.container,'keyup',this.onKeyUpListener);
  531.         Event.stopObserving(this.container,"mousedown",this.onTextEditEndListener);
  532.  
  533. }
  534.  
  535. /**
  536. *clear the shape text, this removes the shape text and stores it in a temporary location, we do this for performance
  537. * reasons, since we don't want to draw every single shape line every time we move.
  538. * @param shape--optional, if no shape provided, this.selected will be used
  539. **/
  540.  
  541. RichDrawEditor.prototype.clearShapeText=function(shape){
  542.     var subject=shape;
  543.     if(!subject){
  544.         subject=this.selected;    
  545.     }
  546.     if(subject){
  547.                 this.renderer.getShapeText(subject);
  548.                 this.renderer.getFont(subject);
  549.                 this.renderer.clearShapeText(subject);
  550.                 if(!this.renderer.isConnector(subject)){
  551.                     this.clearTextForAttachedConnectors(subject);
  552.                     }
  553.                 }
  554.         
  555. }
  556. /**
  557. *reset the shape text after the shape move is complete
  558. *@param shape--optional, if no shape provided, this.selected will be used
  559. */
  560. RichDrawEditor.prototype.resetShapeText=function(shape){
  561.     
  562.     var subject=shape;
  563.     if(!subject){
  564.         subject=this.selected;    
  565.     }
  566.     if(subject){
  567.             
  568.              var text=this.renderer.getShapeText(subject);
  569.              var shapeFont=this.renderer.getFont(subject);
  570.              if(text){
  571.                   this.renderer.setShapeText(subject,text,this.font,false,shapeFont,this.zoom);
  572.              }
  573.              if(!this.renderer.isConnector(subject)){
  574.                     this.resetTextForAttachedConnectors(subject);
  575.                 }
  576.             }
  577. }
  578. /**
  579.  * clear the text for all the connectors attached to a particular shape
  580.  * @param shape--optional, if no shape provided, this.selected will be used
  581.  */
  582.  RichDrawEditor.prototype.clearTextForAttachedConnectors=function(shape){
  583.      var subject=shape;
  584.      if(!subject)
  585.          subject=this.selected;
  586.      var connList=this.renderer.getAllConnectorsForShape(subject);
  587.      for(var i=0;i<connList.length;i++){
  588.          if(connList[i]){
  589.              this.clearShapeText(connList[i]);
  590.          }
  591.      }
  592.  }
  593.  /**
  594.  * reset the text for all the connectors attached to a particular shape
  595.  * @param shape--optional, if no shape provided, this.selected will be used
  596.  */
  597.  RichDrawEditor.prototype.resetTextForAttachedConnectors=function(shape){
  598.      var subject=shape;
  599.      if(!subject)
  600.          subject=this.selected;
  601.      var connList=this.renderer.getAllConnectorsForShape(shape);
  602.      for(var i=0;i<connList.length;i++){
  603.          if(connList[i]){
  604.              this.resetShapeText(connList[i]);
  605.          }
  606.      }
  607.  }
  608. /****************************END TEXT functions************************************/
  609.  
  610.  
  611. /**
  612. *getSeletedElement
  613. **/
  614. RichDrawEditor.prototype.getSelectedElement = function() {
  615.   return this.selected;
  616. };
  617.  
  618. /**
  619. *set grid
  620. **/
  621. RichDrawEditor.prototype.setGrid = function(horizontal, vertical) {
  622.   this.gridX = horizontal;
  623.   this.gridY = vertical;
  624. };
  625.  
  626. /** 
  627. *during open, we first reset zoom to 1, add the shapes and then set it back to "zoom-factor"
  628. * 
  629. **/
  630. RichDrawEditor.prototype.open=function(div){
  631.     
  632.         this.removeAll();
  633.         //reset the zoom to 1
  634.         this.setZoom((1.0/this.zoom));
  635.         //now call the renderer specific operations for open
  636.         this.renderer.open(div);
  637.         //get all shapes
  638.         var nodes=this.renderer.getAllShapes(this.container.ownerDocument);
  639.         var nodeArray=$A(nodes);
  640.         //get all connectors
  641.         nodes=this.renderer.getAllConnectors(this.container.ownerDocument);
  642.         for(var i=0;i<nodes.length;i++){
  643.             nodeArray[nodeArray.length]=nodes[i];
  644.         }
  645.         for(var i=0;i<nodeArray.length;i++){
  646.             var node=nodeArray[i];
  647.             this.addNewShapeListeners(node);
  648.         }
  649.         
  650.         //first set the pageSize as derived from the file being opened
  651.         var pageSize=div.getElementsByTagName("page-size");
  652.         var width=this.DEFAULT_PAGE_WIDTH;
  653.         var hieght=this.DEFAULT_PAGE_HEIGHT;
  654.         if(pageSize&&pageSize.length>0){
  655.             width=pageSize.item(0).getAttribute("width");
  656.             hieght=pageSize.item(0).getAttribute("height");
  657.             
  658.         }
  659.         this.setPageSize(width,hieght);
  660.         //now set the zoom
  661.         var zoomElement=div.getElementsByTagName("zoom-factor");
  662.         var factor=0.8;
  663.         if(zoomElement&&zoomElement.length>0){
  664.             factor=zoomElement.item(0).getAttribute("factor");
  665.             
  666.         }
  667.         this.setZoom(factor);
  668.         $('_zoomValue').innerHTML=(this.getZoom()*100).toFixed(0)+"%";
  669. };
  670.  
  671. /** 
  672. *used by new function to reset the editor to defaults in prepration for new
  673. */
  674. RichDrawEditor.prototype.reset=function(){
  675.  
  676.     gApplication.transmit('w', 'cmd reset');
  677.  
  678.     this.removeAll();
  679.     this.setPageSize(this.DEFAULT_PAGE_WIDTH,this.DEFAULT_PAGE_HEIGHT);
  680. }
  681.  
  682. /**
  683. *used by "new" toolbar function, clear the canvas
  684. **/
  685. RichDrawEditor.prototype.removeAll=function(){
  686.         this.unselect();
  687.         var nodes=this.renderer.getAllShapes(this.container.ownerDocument);
  688.         
  689.         var nodeArray=$A(nodes);
  690.         nodes=this.renderer.getAllConnectors(this.container.ownerDocument);
  691.         for(var i=0;i<nodes.length;i++){
  692.             nodeArray[nodeArray.length]=nodes[i];
  693.         }
  694.         for(var i=0;i<nodeArray.length;i++){
  695.             var node=nodeArray[i];
  696.             this.renderer.remove(node);
  697.         }
  698.  
  699. }
  700. /**
  701. *set the current edit mode
  702. **/
  703. RichDrawEditor.prototype.setMode=function (value){
  704.     this.mode=value;
  705.     if(value=='line'){
  706.         this.renderer.setCursor(this.container,"./cursors/line-draw.cur");
  707.     }
  708.     else if(value=='ortho-line'){
  709.         this.renderer.setCursor(this.container,"./cursors/orth-draw.cur");
  710.     }
  711.     else if(value=='curve-line'){
  712.         this.renderer.setCursor(this.container,"./cursors/curve-draw.cur");
  713.     }
  714.     else if (value=='text'){
  715.         this.renderer.setCursor(this.container,"./cursors/text.cur");
  716.     }
  717.     else{
  718.         this.renderer.setCursor(this.container,"default");
  719.     }
  720.  
  721. }
  722. /**
  723. *this is the driver for all toolbar related commands,
  724. *if a shape is selected the command is delegated to the renderer
  725. *otherwise it is handled by the editor itself
  726. **/
  727. RichDrawEditor.prototype.editCommand = function(cmd, value)
  728. {
  729.     this.externaleditCommand(cmd, value, false);
  730. }
  731. RichDrawEditor.prototype.externaleditCommand = function(cmd, value, external)
  732. {
  733.     if (!external && this.initialized)
  734.     {
  735.         if (!this.selected)
  736.             gApplication.transmit('w', 'cmd ' + cmd + " " + value);
  737.         else
  738.             gApplication.transmit('w', 'cmd ' + cmd + " " + value + " " + this.selected.id);
  739.     }
  740.   //debugger;
  741.   if (cmd == 'mode') {
  742.     this.setMode(value);
  743.   }
  744.   if(cmd=='zoom'){
  745.     this.setZoom(value);
  746.   }
  747.   else if (this.selected == null) {
  748.     if (cmd == 'fillcolor') {
  749.       this.fillColor = value;
  750.     }
  751.     else if (cmd == 'linecolor') {
  752.       this.lineColor = value;
  753.     }
  754.     else if (cmd == 'linewidth') {
  755.       this.lineWidth = parseInt(value) + 'px';
  756.     }
  757.     else if (cmd=='opacity'){
  758.       this.opacity=value;
  759.     }
  760.      else if (cmd=='gradient'){
  761.       this.gradient=value;
  762.     }
  763.     else if (cmd=='shadow'){
  764.       this.shadowOn=value;
  765.     }
  766.     else if(cmd=='linestyle'){
  767.         this.lineStyle=value;
  768.     }
  769.      else if(cmd=='fontSize'){
  770.         this.font.size=value;
  771.     }
  772.     else if(cmd=='fontFamily'){
  773.         this.font.family=value;
  774.     }
  775.     else if(cmd=='bold'){
  776.         if(this.font.bold=='bold'){
  777.             this.font.bold='normal';
  778.         }
  779.         else{
  780.             this.font.bold='bold';
  781.         }
  782.     }
  783.      else if(cmd=='italic'){
  784.         if(this.font.italics=='italic'){
  785.             this.font.italics='normal';
  786.         }
  787.         else{
  788.             this.font.italics='italic';
  789.         }
  790.     }
  791.      else if(cmd=='fontColor'){
  792.         this.font.color=value;
  793.     }
  794.      else if(cmd=='align'){
  795.         this.font.align=value;
  796.     }
  797.   }
  798.   else {
  799.     
  800.     this.renderer.editCommand(this.selected, cmd, value,this.zoom);
  801.     if(this.textEditMode==true){
  802.         if(cmd=='fontColor'||cmd=='align'||cmd=='italic'||cmd=='bold'||cmd=='fontFamily'||cmd=='fontSize')
  803.             this.setTextAreaFont($('__shapeText'));
  804.     
  805.     }
  806.   }
  807. }
  808.  
  809. /**
  810. * set the page width and heigh and zoom it according to current zoom factor
  811. **/
  812. RichDrawEditor.prototype.setPageSize=function(width,height){
  813.     if(width>this.MAX_WIDTH){
  814.         setHelp("<font color='red'>Maximum width allowed is:"+this.MAX_WIDTH+"</font>");
  815.     }
  816.     else if(height>this.MAX_HEIGHT){
  817.         setHelp("<font color='red'>Maximum height allowed is:"+this.MAX_HEIGHT+"</font>");
  818.         
  819.     }
  820.     else{
  821.         this.width=width;
  822.         this.height=height;
  823.         this.page.style.width=(this.width*this.zoom)+'px';
  824.         this.page.style.height=(this.height*this.zoom)+'px';
  825.     }
  826.     this.updateShapeInfo(null);
  827.     
  828. }
  829. /**
  830. *get the page size and width return as an array with elements "width", "height"
  831. **/
  832. RichDrawEditor.prototype.getPageSize=function(){
  833.     var size=new Array();
  834.     size['width']=this.width;
  835.     size['height']=this.height;
  836.     return size;
  837. }
  838. /**zoom functions**/
  839. /**
  840. *set zoom: first set the zoom for the container, then call setShapeZoom for shapes
  841. **/
  842. RichDrawEditor.prototype.setZoom=function(value){
  843.     
  844.     value=(this.zoom*value).toFixed(2);
  845.     if(value<0.15||value>4.0)return;
  846.     this.prevZoom=this.zoom;
  847.     this.zoom=value;
  848.     var width=this.page.style.width.split('px')[0];
  849.     var height=this.page.style.height.split('px')[0];
  850.     width=Math.round(width*(value/this.prevZoom));
  851.     height=Math.round(height*(value/this.prevZoom));
  852.     this.page.style.width=width+'px';
  853.     this.page.style.height=height+'px';
  854.     this.setShapeZoom(this.container,value,this.prevZoom);
  855. }
  856. /**
  857. *set the zoom on all individual shapes, call setLineZoom for lines
  858. **/
  859. RichDrawEditor.prototype.setShapeZoom=function(doc,value,prevZoom){
  860.     this.renderer.remove($('tracker-group'));
  861.     this.renderer.remove($('active-shape-tracker'));
  862.     var nodes=this.renderer.getAllShapes(doc);
  863.     var length=nodes.length;
  864.     for(var i=0;i<nodes.length;i++){
  865.         
  866.         var shape=nodes[i];
  867.         var rect=this.renderer.bounds(shape);
  868.         
  869.         this.renderer.setWidth(shape,Math.round(parseFloat(rect['width'])*(value/prevZoom)));
  870.         this.renderer.setHeight(shape,Math.round(parseFloat(rect['height'])*(value/prevZoom)));
  871.         
  872.         this.renderer.setY(shape,Math.round(parseFloat(rect['y'])*(value/prevZoom)));
  873.         this.renderer.setX(shape,Math.round(parseFloat(rect['x'])*(value/prevZoom)));
  874.         this.renderer.updateRotation(shape);
  875.         var text=this.renderer.getShapeText(shape,doc);
  876.         var font=this.renderer.getFont(shape);
  877.         this.renderer.clearShapeText(shape);
  878.         if(text)
  879.                 this.renderer.setShapeText(shape,text,this.font,false,font,value);
  880.  
  881.     }
  882.     
  883.     this.setLineZoom(doc,value,prevZoom);
  884.     this.renderer.updateTracker(this.selected);
  885. }
  886.  
  887. /**
  888. *now set the zoom on all lines
  889. **/
  890. RichDrawEditor.prototype.setLineZoom=function(doc,value,prevZoom){
  891.     var nodes=this.renderer.getAllConnectors(doc);
  892.     var length=nodes.length;
  893.     for(var i=0;i<nodes.length;i++){
  894.         var shape=nodes[i];
  895.         var    fromX=this.renderer.getConnectorFromX(shape) * (value/prevZoom);
  896.         var    fromY=this.renderer.getConnectorFromY(shape) * (value/prevZoom);
  897.         var    toX=this.renderer.getConnectorToX(shape) *(value/prevZoom);
  898.         var    toY=this.renderer.getConnectorToY(shape)*(value/prevZoom);
  899.         this.renderer.moveLinePoint(shape,fromX,fromY,true);
  900.         this.renderer.moveLinePoint(shape,toX,toY,false);
  901.         //now get the control points if any
  902.         if(this.renderer.getConnectorType(shape)=='curve-line'){
  903.             var control1=this.renderer.getControl1(shape);
  904.             var cx1=control1.x* (value/prevZoom);
  905.             var cy1=control1.y*(value/prevZoom);
  906.             this.renderer.setControl1(shape,cx1,cy1);
  907.             var control2=this.renderer.getControl2(shape);
  908.             var cx2=control2.x* (value/prevZoom);
  909.             var cy2=control2.y*(value/prevZoom);
  910.             this.renderer.setControl2(shape,cx2,cy2);
  911.         }
  912.         
  913.         var text=this.renderer.getShapeText(shape,doc);
  914.         var font=this.renderer.getFont(shape);
  915.         this.renderer.clearShapeText(shape);
  916.         if(text)
  917.                 this.renderer.setShapeText(shape,text,this.font,false,font,value,doc);
  918.  
  919.     }
  920. }    
  921. /**
  922. *get zoom factor
  923. **/
  924. RichDrawEditor.prototype.getZoom=function(){
  925.     return this.zoom;
  926. }
  927.  
  928. /**
  929. *return the current value for various commands e.g current fill value, opacity etc. If the shape is selected, the command is delegated
  930. *to the renderer, otherwise handled by the editor
  931. **/
  932. RichDrawEditor.prototype.queryCommand = function(cmd)
  933. {
  934.   if (cmd == 'mode') {
  935.     return this.mode;
  936.   }
  937.   else if (this.selected == null) {
  938.     if (cmd == 'fillcolor') {
  939.       return this.fillColor;
  940.     }
  941.     else if (cmd == 'linecolor') {
  942.       return this.lineColor;
  943.     }
  944.     else if (cmd == 'linewidth') {
  945.       return this.lineWidth;
  946.     }
  947.     else if(cmd=='opacity'){
  948.         return this.opacity;
  949.     }
  950.     else if(cmd=='gradient'){
  951.         return this.gradient;
  952.     }
  953.      else if(cmd=='shadow'){
  954.         return this.shadowOn;
  955.     }
  956.     else if(cmd=='fontSize'){
  957.         return this.font.size;
  958.     }
  959.     else if(cmd=='fontFamily'){
  960.         return this.font.family;
  961.     }
  962.     else if(cmd=='bold'){
  963.         return this.font.bold;
  964.     }
  965.      else if(cmd=='italics'){
  966.         return this.font.italics;
  967.     }
  968.      else if(cmd=='fontColor'){
  969.         return this.font.color;
  970.     }
  971.      else if(cmd=='align'){
  972.         return this.font.align;
  973.     }
  974.     else if(cmd=='font'){
  975.         return this.font;
  976.     }
  977.     else if(cmd=='linedashstyle'){
  978.         return this.linedashstyle;
  979.     }
  980.     else if(cmd=='linestyle'){
  981.         return this.lineStyle;
  982.     }
  983.   }
  984.   else {
  985.     return this.renderer.queryCommand(this.selected, cmd);
  986.   }
  987. }
  988.  
  989.  
  990. RichDrawEditor.prototype.onSelectStart = function(event) {
  991.   return false;
  992. }
  993. /**
  994. * for efficieny purposes we do not redraw the text everytime a shape is moved, 
  995. *which means that when the move related keys are released,
  996. * we need to reset shape text
  997. **/
  998. RichDrawEditor.prototype.onKeyUp=function(event){
  999.     
  1000.     var code=event.keyCode;
  1001.     if((code==46||code==37||code==38||code==39||code==40)&&this.textEditMode==true)
  1002.         return true;
  1003.     if(code==37||code==38||code==39||code==40||code==82||code==76){
  1004.         this.clearShapeText();
  1005.         this.resetShapeText();
  1006.     }
  1007. }
  1008.  
  1009. /**
  1010. *handle various key events
  1011. **/
  1012.  
  1013. RichDrawEditor.prototype.onKeyPress=function(event){
  1014.     var code=event.keyCode;
  1015.     var stop=false;
  1016.     var unicode=event.charCode?event.charCode:event.keyCode;
  1017.     var actualKey=String.fromCharCode(unicode);
  1018.     actualKey=actualKey.toLowerCase();
  1019.     if((code==46||code==37||code==38||code==39||code==40)&&this.textEditMode==true)
  1020.         return;
  1021.     if (gTextEditMode)        
  1022.         return;
  1023.         
  1024.     if(46==code&&!this.textEditMode){
  1025.         if (this.selected)
  1026.             gApplication.transmit('w', 'cmd deleteSelection ' + this.selected.id);
  1027.         this.deleteSelection();
  1028.         stop=true;
  1029.     }
  1030.     //disable fine moves as this will probably generate a lot of traffic for large workspaces.
  1031.     /*else if(37==code&&!this.textEditMode){
  1032.         this.clearShapeText();
  1033.         this.fineMove(1,0,0,0);
  1034.         stop=true;
  1035.     }
  1036.     else if(38==code&&!this.textEditMode){
  1037.         this.clearShapeText();
  1038.         this.fineMove(0,0,1,0);
  1039.         stop=true;
  1040.     }
  1041.     else if(39==code&&!this.textEditMode){
  1042.         this.clearShapeText();
  1043.         this.fineMove(0,1,0,0);
  1044.         stop=true;
  1045.     }
  1046.     else if(40==code&&!this.textEditMode){
  1047.         this.clearShapeText();
  1048.         this.fineMove(0,0,0,1);
  1049.         stop=true;
  1050.     }
  1051.     else if('r'==actualKey){
  1052.         if(event.shiftKey&&!this.textEditMode){
  1053.             this.clearShapeText();
  1054.             this.fineRotateSelection(1);
  1055.             stop=true;
  1056.         }
  1057.     }
  1058.     else if('l'==actualKey){
  1059.         if(event.shiftKey&&!this.textEditMode){
  1060.             this.clearShapeText();
  1061.             this.fineRotateSelection(-1);
  1062.             stop=true;
  1063.         }
  1064.     }*/
  1065.     else if('x'==actualKey){
  1066.         if(event.ctrlKey&&!this.textEditMode)
  1067.         {    this.cut();
  1068.             if (this.selected)
  1069.                 gApplication.transmit('w', 'cmd deleteSelection ' + this.selected.id);
  1070.  
  1071.         }    
  1072.             stop=true;
  1073.     }
  1074.     else if('c'==actualKey){
  1075.         if(event.ctrlKey&&!this.textEditMode)
  1076.             this.copy();
  1077.             stop=true;
  1078.     }
  1079.     else if('v'==actualKey){
  1080.         if(event.ctrlKey&&!this.textEditMode)
  1081.             this.paste();;
  1082.             stop=true;
  1083.     }
  1084.     else if('b'==actualKey){
  1085.         if(event.ctrlKey){
  1086.             this.editCommand("bold");
  1087.             stop=true;
  1088.         }
  1089.     }
  1090.     else if('i'==actualKey){
  1091.         if(event.ctrlKey){
  1092.             this.editCommand("italic");
  1093.             stop=true;
  1094.             
  1095.         }
  1096.     }
  1097.     else{
  1098.         stop=false;
  1099.     }
  1100.     
  1101.     if(stop&&!this.textEditMode){
  1102.         Event.stop(event);
  1103.         return false;
  1104.     }
  1105.     else{
  1106.         return true;
  1107.     }
  1108. }
  1109.  
  1110. /*******************MOUSE OVER***************************/
  1111. /**
  1112. *if the mouse is over the tracker set the appropriate cursor.
  1113. *This method needs some serious cleaning up,
  1114. *there is nothing wrong with it except that the logic could be performed much more elegantly.
  1115. **/
  1116. RichDrawEditor.prototype.onMouseOver=function(event){
  1117.  
  1118.     var source=Event.element(event);
  1119.     if(source.id=='resize-bottom'||source.id=='resize-right'||source.id=="tracker-rotate"||
  1120.     source.id=='resize-left'||source.id=='resize-top'){
  1121.     var offset = Position.cumulativeOffset(this.container);
  1122.     var snappedX = (Event.pointerX(event) - offset[0]) / this.gridX * this.gridX;
  1123.     var snappedY = (Event.pointerY(event) - offset[1]) / this.gridY * this.gridY;
  1124.         
  1125.         var rotation=this.renderer.bounds(this.selected)['rotation'];
  1126.         rotation=rotation%360;
  1127.         if(source.id=='resize-bottom'){
  1128.             source.style.cursor='s-resize';
  1129.             if(rotation!=null&&((rotation>=45&&rotation<=135)||(rotation>=225&&rotation<=315))){
  1130.                 source.style.cursor='e-resize';
  1131.             }
  1132.             else{
  1133.                 source.style.cursor='s-resize';
  1134.             }
  1135.         }
  1136.         else if(source.id=='resize-top'){
  1137.             source.style.cursor='s-resize';
  1138.             if(rotation!=null&&((rotation>=45&&rotation<=135)||(rotation>=225&&rotation<=315))){
  1139.                 source.style.cursor='e-resize';
  1140.             }
  1141.             else{
  1142.                 source.style.cursor='s-resize';
  1143.             }
  1144.         }
  1145.         else if(source.id=='resize-right'){
  1146.             source.style.cursor='e-resize';
  1147.             if(rotation!=null&&((rotation>=45&&rotation<=135)||(rotation>=225&&rotation<=315))){
  1148.                 source.style.cursor='s-resize';
  1149.             }
  1150.             else{
  1151.                 source.style.cursor='e-resize';
  1152.             }
  1153.         }
  1154.          else if(source.id=='resize-left'){
  1155.             source.style.cursor='e-resize';
  1156.             
  1157.             if(rotation!=null&&((rotation>=45&&rotation<=135)||(rotation>=225&&rotation<=315))){
  1158.                 source.style.cursor='s-resize';
  1159.             }
  1160.             else{
  1161.                 source.style.cursor='e-resize';
  1162.             }
  1163.             
  1164.         }
  1165.         else if(source.id=="tracker-rotate"){
  1166.             
  1167.             source.style.cursor='move';
  1168.             this.resizeMode="rotate";
  1169.         }
  1170.         
  1171.     }
  1172.     
  1173.     return false;
  1174. }
  1175.  
  1176. /*******************MOUSE DOWN***************************/
  1177. /**
  1178. *handle mouse down related events, another refactoring candidate, too much going on in here...
  1179. **/
  1180. RichDrawEditor.prototype.onMouseDown = function(event) {
  1181.   
  1182.   var offset = Position.cumulativeOffset(this.container);
  1183.   var snappedX = Math.round((Event.pointerX(event) - offset[0]) / this.gridX) * this.gridX;
  1184.   var snappedY = Math.round((Event.pointerY(event) - offset[1]) / this.gridY) * this.gridY;
  1185.   var source=Event.element(event);
  1186.   if(source.id=='resize-bottom'||source.id=='resize-right'||source.id=="tracker-rotate"||
  1187.     source.id=='resize-left'||source.id=='resize-top'||source.id=='resize-from'||source.id=='resize-to'
  1188.     ||source.id=='control1'||source.id=='control2'){
  1189.     this.prevMode=this.mode;
  1190.     this.setMode('resize');
  1191.         if(this.selected){
  1192.             this.mouseDownX = snappedX;
  1193.             this.mouseDownY = snappedY;
  1194.             var rect=this.renderer.bounds(this.selected);
  1195.             this.prevWidth=rect['width'];
  1196.             this.prevLeft=rect['x'];
  1197.             this.prevHeight=rect['height'];
  1198.             this.prevTop=rect['y'];
  1199.             this.prevRotation=rect['rotation'];
  1200.             if(!this.prevRotation)
  1201.                 this.prevRotation=0;
  1202.             
  1203.              if(source&&source.id){
  1204.                 if(source.id=='resize-from'){
  1205.                     this.resizeMode='line-from';
  1206.                 }
  1207.                 else if(source.id=='resize-to'){
  1208.                     this.resizeMode='line-to';
  1209.                 }
  1210.                 else if(source.id=='control1'){
  1211.                     this.resizeMode='control1';
  1212.                     
  1213.                 }
  1214.                 else if(source.id=='control2'){
  1215.                     this.resizeMode='control2';
  1216.                     
  1217.                 }
  1218.                 else if(source.id=='resize-bottom'){            
  1219.                     this.resizeMode="bottom-stretch";
  1220.                     
  1221.                 }
  1222.                 else if(source.id=='resize-top'){
  1223.                     this.resizeMode="top-stretch";
  1224.                     
  1225.                 }
  1226.                 else if(source.id=='resize-right'){
  1227.                     this.resizeMode="right-stretch";
  1228.                     
  1229.                 }
  1230.                 
  1231.                 else if(source.id=='resize-left'){
  1232.                     this.resizeMode="left-stretch";
  1233.                     
  1234.                 }
  1235.                 else if(source.id=="tracker-rotate"){
  1236.                     this.resizeMode="rotate";
  1237.                     
  1238.                 }
  1239.                 this.clearShapeText();
  1240.             }
  1241.             
  1242.         }
  1243.     
  1244.     
  1245. //    if(this.resizeMode=="rotate"){
  1246. //        setHelp("For Fine rotation use <B>Shift+R</B> and <B>Shift+L</B>");
  1247. //    }
  1248.     Event.observe(this.container, "mousemove", this.onDrawListener);  
  1249.   }
  1250.   else if (this.mode != 'select'&&this.mode!='resize') {
  1251.     
  1252.     this.unselect();
  1253.     setHelp("Drag your mouse to size the selected shape");
  1254.     this.mouseDownX = snappedX;
  1255.     this.mouseDownY = snappedY;
  1256.     if(this.mode!='line'&&this.mode!='ortho-line'&&this.mode!='curve-line'){
  1257.         var mouseX=(this.mouseDownX*1)+this.container.parentNode.scrollLeft;
  1258.         var mouseY=( this.mouseDownY*1)+this.container.parentNode.scrollTop;
  1259.     
  1260.         this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.lineWidth, mouseX, mouseY, 1, 1,this.opacity,this.gradient,this.shadowOn);
  1261.         this.selected.setAttribute('id', 'shape:' + createUUID());
  1262.         this.addNewShapeListeners(this.selected);
  1263.         if(this.mode=="text"){
  1264.             this.textToolBeginNew=true;
  1265.         }
  1266.     }
  1267.     
  1268.     else{
  1269.         var mouseX=(this.mouseDownX*1)+this.container.parentNode.scrollLeft;
  1270.         var mouseY=( this.mouseDownY*1)+this.container.parentNode.scrollTop;
  1271.         this.unselect();
  1272.         this.selected = this.renderer.createLine(this.mode, this.lineColor, this.lineWidth, mouseX, mouseY,this.lineStyle);
  1273.         this.selected.setAttribute('id', 'connector:' + createUUID());
  1274.         this.addNewShapeListeners(this.selected);
  1275.     
  1276.     }
  1277.     Event.observe(this.container, "mousemove", this.onDrawListener);  
  1278.     this.renderer.setCursor(this.container,'crosshair');
  1279.   }
  1280.   else {
  1281.     if (this.mouseDownX != snappedX || this.mouseDownY != snappedY)
  1282.       this.unselect();
  1283.   }
  1284.   
  1285.   return false;
  1286. };
  1287. RichDrawEditor.prototype.isLineDrawMode=function(){
  1288.     return (this.mode=='line'||this.resizeMode=='line-from'||this.resizeMode=='line-to'||this.mode=='ortho-line'
  1289.         ||this.mode=='curve-line')
  1290. }
  1291. /**
  1292. *if the mode is line draw then show connection points
  1293. **/
  1294. RichDrawEditor.prototype.onShapeMouseEnter=function(event){
  1295.     var source=Event.element(event);
  1296.     var shape=this.renderer.getShapeFromEventSource(source);
  1297.     //setHelp(shape.id);
  1298.     if(!this.renderer.isConnector(shape)){
  1299.         var newActiveShape=shape;
  1300.         if((this.lineActiveShape&&newActiveShape&&this.lineActiveShape.id==newActiveShape.id)&&newActiveShape.id)
  1301.         //revisit this
  1302.         // ||(newActiveShape.id&&newActiveShape.id.indexof("shape")<0))
  1303.             return;
  1304.         else{
  1305.         
  1306.         
  1307.         if(this.isLineDrawMode()){
  1308.             this.renderer.remove($("active-shape-tracker"));
  1309.             this.lineActiveShape=newActiveShape;
  1310.             
  1311.             this.renderer.showConnectionPoints(this.lineActiveShape);
  1312.         }
  1313.     }
  1314.     }
  1315.     if(!this.isLineDrawMode()&&this.mode!='text'){
  1316.         
  1317.         this.renderer.setCursor(this.container,"move");
  1318.         
  1319.     }
  1320. };
  1321.  
  1322. /*******************MOUSE OUT***************************/
  1323.  
  1324. RichDrawEditor.prototype.onShapeMouseOut=function(event){
  1325.     if(!this.isLineDrawMode()&&this.mode!="text")
  1326.         this.renderer.setCursor(this.container,"default");
  1327. }
  1328.  
  1329. /**
  1330. *if the mouse leaves the container, stop listening to some events 
  1331. **/
  1332. RichDrawEditor.prototype.onMouseOut=function(event){
  1333.     
  1334.     if(event.toElement&&(event.toElement.id=='_body'||event.toElement.id=='_surround'||event.toElement.id=="palette")){
  1335.     
  1336.     if((this.mode!='resize'&&this.mode!='select'&&this.mode!="text"))
  1337.     {
  1338.         var transmitData = this.copyToRemote();
  1339.         if (transmitData != null)
  1340.             gApplication.transmit('w', "cpy " + transmitData);
  1341.     }
  1342.     else if (this.selected)
  1343.     {
  1344.         var rect=new Object();
  1345.         rect=this.renderer.bounds(this.selected);
  1346.         if(!this.renderer.isConnector(this.selected))
  1347.         {
  1348.             //a shape
  1349.             rect['x']=(rect['x']*(1.0/this.zoom)).toFixed(0);
  1350.             rect['y']=(rect['y']*(1.0/this.zoom)).toFixed(0);
  1351.             rect['width']=(rect['width']*(1.0/this.zoom)).toFixed(0);
  1352.             rect['height']=(rect['height']*(1.0/this.zoom)).toFixed(0);
  1353.             var transmitData = "mvs " + this.selected.id + " " + rect['width'] + " " + rect['height'] + " " + rect['x'] + " " + rect['y'] + " " + rect['rotation'];
  1354.  
  1355.         }
  1356.         else{
  1357.             //a connector
  1358.             rect['x']=(rect['x']*(1.0/this.zoom)).toFixed(0);
  1359.             rect['y']=(rect['y']*(1.0/this.zoom)).toFixed(0);
  1360.             rect['x2']=(rect['x2']*(1.0/this.zoom)).toFixed(0);
  1361.             rect['y2']=(rect['y2']*(1.0/this.zoom)).toFixed(0);
  1362.             var transmitData = "mvc " + this.selected.id + " " + rect['x'] + " " + rect['x2'] + " " + rect['y'] + " " + rect['y2'] + " " + rect['type'];
  1363.         }
  1364.         gApplication.transmit('w', transmitData);
  1365.     }
  1366.  
  1367.  
  1368.  
  1369.         Event.stopObserving(this.container, "mousemove", this.onDrawListener);  
  1370.         Event.stopObserving(this.container, "mousemove", this.onDragListener);  
  1371.     }
  1372. }
  1373.  
  1374. /**
  1375. *respond to various mouse up events
  1376. */
  1377. RichDrawEditor.prototype.onMouseUp = function(event)
  1378. {
  1379.  
  1380.     if (this.mode != 'select'&&this.mode!='resize'&&this.mode!='line'&&this.mode!='ortho-line')
  1381.     {
  1382.         setHelp("Click on the shape to select it");
  1383.     }
  1384.   
  1385.     if((this.mode!='resize'&&this.mode!='select'&&this.mode!="text"))
  1386.     {
  1387.         var transmitData = this.copyToRemote();
  1388.         if (transmitData != null)
  1389.             gApplication.transmit('w', "cpy " + transmitData);
  1390.     }
  1391.     else if (this.selected)
  1392.     {
  1393.         var rect=new Object();
  1394.         rect=this.renderer.bounds(this.selected);
  1395.         if(!this.renderer.isConnector(this.selected))
  1396.         {
  1397.             //a shape
  1398.             rect['x']=(rect['x']*(1.0/this.zoom)).toFixed(0);
  1399.             rect['y']=(rect['y']*(1.0/this.zoom)).toFixed(0);
  1400.             rect['width']=(rect['width']*(1.0/this.zoom)).toFixed(0);
  1401.             rect['height']=(rect['height']*(1.0/this.zoom)).toFixed(0);
  1402.             var transmitData = "mvs " + this.selected.id + " " + rect['width'] + " " + rect['height'] + " " + rect['x'] + " " + rect['y'] + " " + rect['rotation'];
  1403.  
  1404.         }
  1405.         else{
  1406.             //a connector
  1407.             rect['x']=(rect['x']*(1.0/this.zoom)).toFixed(0);
  1408.             rect['y']=(rect['y']*(1.0/this.zoom)).toFixed(0);
  1409.             rect['x2']=(rect['x2']*(1.0/this.zoom)).toFixed(0);
  1410.             rect['y2']=(rect['y2']*(1.0/this.zoom)).toFixed(0);
  1411.             var transmitData = "mvc " + this.selected.id + " " + rect['x'] + " " + rect['x2'] + " " + rect['y'] + " " + rect['y2'] + " " + rect['type'];
  1412.         }
  1413.         gApplication.transmit('w', transmitData);
  1414.     }
  1415.  
  1416.     Event.stopObserving(this.container, "mousemove", this.onDrawListener);
  1417.     Event.stopObserving(this.container, "mousemove", this.onDragListener);
  1418.  
  1419.     if(this.dragStarted)
  1420.     {
  1421.           this.clearShapeText();
  1422.           this.resetShapeText(); 
  1423.           this.dragStarted=false;
  1424.     }
  1425.     
  1426.     if(this.mode=='line'||this.mode=='curve-line'||this.resizeMode=='line-from'||this.resizeMode=='line-to'||this.mode=='ortho-line')
  1427.     {
  1428.         //todo add show marker logic here
  1429.         if(this.resizeMode=='line-from')
  1430.             this.renderer.connectLine(this.lineActiveShape,this.selected,"from");
  1431.         else if(this.resizeMode=='line-to'||this.mode=='line'||this.mode=='ortho-line'||this.mode=='curve-line')
  1432.             this.renderer.connectLine(this.lineActiveShape,this.selected,"to");
  1433.         
  1434.         this.renderer.remove($('active-shape-tracker'));
  1435.         this.lineActiveShape=null;
  1436.           this.clearShapeText();
  1437.           this.resetShapeText(); 
  1438.     }
  1439.     if(this.mode=="text"&&this.textToolBeginNew){
  1440.           this.beginTextToolEdit(this.selected);
  1441.           this.textToolBeginNew=false;
  1442.     }
  1443.     else if(this.mode=="text"&&!this.textToolBeginNew){
  1444.           setHelp("<font color='red'>Text Mode:</font>Click again to draw another text shape");
  1445.  
  1446.         var transmitData = this.copyToRemote();
  1447.         if (transmitData != null)
  1448.             gApplication.transmit('w', "cpy " + transmitData);
  1449.       
  1450.     }
  1451.     if(this.mode=='resize'){
  1452.           Event.stopObserving(this.container, "mousemove", this.onDrawListener); 
  1453.           this.clearShapeText();
  1454.           this.resetShapeText(); 
  1455.           this.setMode(this.prevMode);
  1456.           this.resizeMode="";
  1457.     }
  1458.       
  1459.     if (this.mode != 'select'&&this.mode!='line'&&this.mode!='ortho-line'&&this.mode!="text"&&this.mode!='curve-line') {
  1460.         this.setMode('select');
  1461.     }
  1462.     else{
  1463.         //mainly to refresh the cursor!!!
  1464.         this.setMode(this.mode);
  1465.     } 
  1466.  
  1467.   
  1468. };
  1469. /**
  1470. *begin text tool edit will first set the stroke-width to 0 and then start text editing
  1471. *@param {shape} selected shape
  1472. **/
  1473. RichDrawEditor.prototype.beginTextToolEdit=function(shape){
  1474.     this.renderer.setStrokeWidth(shape,"0px");
  1475.     this.renderer.setOpacity(shape,"0.0");
  1476.     this.startTextEdit(shape);
  1477. }
  1478. /*****************ON DRAG**********************/
  1479. /**
  1480. *move the shape
  1481. **/
  1482. RichDrawEditor.prototype.onDrag = function(event) {
  1483.   var offset = Position.cumulativeOffset(this.container);
  1484.   var snappedX = Math.round((Event.pointerX(event) - offset[0]) / this.gridX) * this.gridX;
  1485.   var snappedY = Math.round((Event.pointerY(event) - offset[1]) / this.gridY) * this.gridY;
  1486.  
  1487.   var deltaX = snappedX - this.mouseDownX;
  1488.   var deltaY = snappedY - this.mouseDownY;
  1489.   if(!this.dragStarted==true){
  1490.       this.clearShapeText();
  1491.       this.dragStarted=true;
  1492.   }
  1493.   if(this.renderer.isConnector(this.selected)){
  1494.     this.renderer.disconnectLineFromShape(this.selected,"to");
  1495.     this.renderer.disconnectLineFromShape(this.selected,"from");
  1496.     this.renderer.moveCompleteLine(this.selected,this.selectedBounds,deltaX,deltaY);
  1497.     this.clearShapeText();
  1498.   }
  1499.   else{
  1500.      
  1501.       this.renderer.move(this.selected, (this.selectedBounds.x*1) + deltaX, (this.selectedBounds.y*1) + deltaY);
  1502.       this.renderer.moveLineWithShape(this.selected);
  1503.   }
  1504.   // Update selection tracker
  1505.   this.renderer.updateTracker(this.selected);
  1506.   this.updateShapeInfo(this.selected);
  1507. };
  1508.  
  1509. /**
  1510. *move 1px at a time--reacting to arrow key press
  1511. **/
  1512. RichDrawEditor.prototype.fineMove=function(left,right,up,down){
  1513.     if(this.selected){
  1514.         if(this.renderer.isConnector(this.selected)) return;
  1515.         var deltaX=right-left;
  1516.         var deltaY=down-up;
  1517.         //this.selectedBounds = this.renderer.bounds(this.selected);
  1518.         if(deltaY==0){
  1519.             this.renderer.fineMove(this.selected, deltaX, true);
  1520.         }
  1521.         else{
  1522.             this.renderer.fineMove(this.selected,  deltaY, false);
  1523.         }
  1524.     
  1525.         this.renderer.moveLineWithShape(this.selected);
  1526.         this.renderer.updateTracker(this.selected);
  1527.         //this.updateShapeInfo(this.selected);
  1528.         this.selectedBounds = this.renderer.bounds(this.selected);
  1529.     }
  1530.     else{
  1531.         setHelp("Select a shape for Fine move");
  1532.     }
  1533.  
  1534. }
  1535.  
  1536. /**************ON DRAW*****************/
  1537. /**
  1538. *either create new or resize existing
  1539. **/
  1540. RichDrawEditor.prototype.onDraw = function(event) {
  1541.   if (this.selected == null)
  1542.     return;
  1543.  
  1544.  
  1545.   var offset = Position.cumulativeOffset(this.container);
  1546.   var snappedX = Math.round((Event.pointerX(event) - offset[0]) / this.gridX) * this.gridX;
  1547.   var snappedY = Math.round((Event.pointerY(event) - offset[1]) / this.gridY) * this.gridY;
  1548.   
  1549.   
  1550.   //this means we are drawing a new shape or line on the canvas
  1551.   
  1552.   if(this.mode!='resize'&&this.mode!='select'){
  1553.     var mouseX=(this.mouseDownX*1)+this.container.parentNode.scrollLeft;
  1554.     var mouseY=( this.mouseDownY*1)+this.container.parentNode.scrollTop;
  1555.     var sx=(snappedX*1)+this.container.parentNode.scrollLeft;
  1556.     var sy=(snappedY*1)+this.container.parentNode.scrollTop;
  1557.     this.renderer.resize(this.selected, mouseX,mouseY,sx,sy);
  1558.     this.updateShapeInfo(this.selected);
  1559.     //we show tracker during draw only for connectors
  1560.     if(this.renderer.isConnector(this.selected)){
  1561.           this.renderer.updateTracker(this.selected);
  1562.           
  1563.       }
  1564.       return;
  1565.   }
  1566.   
  1567.   //otherwise check the resize mode, if the mode is horizontal then keep left static
  1568.   //otherwise if mode is vertical keep the top static
  1569.   
  1570.   if(this.mode=='resize'||this.mode=='select'){
  1571.           this.resizeCounter++;
  1572.           if(this.resizeCounter!=2){
  1573.               return;
  1574.           }
  1575.           this.resizeCounter=0;
  1576.       
  1577.       if(this.resizeMode=="line-from"){
  1578.           
  1579.         var sx=(snappedX*1)+this.container.parentNode.scrollLeft;
  1580.         var sy=(snappedY*1)+this.container.parentNode.scrollTop;
  1581.         this.renderer.disconnectLineFromShape(this.selected,"from");
  1582.           this.renderer.moveLine(this.selected,sx,sy,true);
  1583.           
  1584.           
  1585.       }
  1586.       else if(this.resizeMode=="line-to"){
  1587.           var sx=(snappedX*1)+this.container.parentNode.scrollLeft;
  1588.         var sy=(snappedY*1)+this.container.parentNode.scrollTop;
  1589.         
  1590.         this.renderer.disconnectLineFromShape(this.selected,"to");
  1591.           this.renderer.moveLine(this.selected,sx,sy,false);
  1592.           
  1593.           
  1594.       }
  1595.       //add control point listeners
  1596.       else if(this.resizeMode=="control1"){
  1597.           var sx=(snappedX*1)+this.container.parentNode.scrollLeft;
  1598.         var sy=(snappedY*1)+this.container.parentNode.scrollTop;
  1599.           this.renderer.setControl1(this.selected,sx,sy);
  1600.           
  1601.           
  1602.       }
  1603.       else if(this.resizeMode=="control2"){
  1604.           var sx=(snappedX*1)+this.container.parentNode.scrollLeft;
  1605.         var sy=(snappedY*1)+this.container.parentNode.scrollTop;
  1606.           this.renderer.setControl2(this.selected,sx,sy);
  1607.           
  1608.           
  1609.       }
  1610.       //use this for right pull
  1611.       if(this.resizeMode=="right-stretch"){
  1612.           this.renderer.resizeWidth(this.selected, snappedX,snappedY, this.mouseDownX,this.mouseDownY,this.prevWidth,true);
  1613.           this.renderer.moveLineWithShape(this.selected);
  1614.       }
  1615.       else 
  1616.       if(this.resizeMode=="left-stretch"){
  1617.           
  1618.           this.renderer.resizeWidth(this.selected, snappedX,snappedY, this.mouseDownX,this.mouseDownY,this.prevWidth,false);
  1619.           this.renderer.moveLineWithShape(this.selected);
  1620.       }
  1621.       //use this for bottom pull
  1622.       else if(this.resizeMode=="bottom-stretch"){
  1623.           this.renderer.resizeHeight(this.selected, snappedX,snappedY, this.mouseDownX,this.mouseDownY,this.prevHeight,true);
  1624.           this.renderer.moveLineWithShape(this.selected);
  1625.       }
  1626.       else if(this.resizeMode=="top-stretch"){
  1627.           this.renderer.resizeHeight(this.selected, snappedX,snappedY, this.mouseDownX,this.mouseDownY,this.prevHeight,false);
  1628.           this.renderer.moveLineWithShape(this.selected);
  1629.       }
  1630.       else if(this.resizeMode=="rotate"){
  1631.           var mouseX=(this.mouseDownX*1)+this.container.parentNode.scrollLeft;
  1632.         var mouseY=( this.mouseDownY*1)+this.container.parentNode.scrollTop;
  1633.         var sx=(snappedX*1)+this.container.parentNode.scrollLeft;
  1634.         var sy=(snappedY*1)+this.container.parentNode.scrollTop;
  1635.           this.processRotate(this.selected, sx,sy,mouseX,mouseY);
  1636.           this.renderer.moveLineWithShape(this.selected);
  1637.       }
  1638.       this.renderer.updateTracker(this.selected);
  1639.       this.updateShapeInfo(this.selected);
  1640.       
  1641.   }
  1642.     return false;
  1643. };
  1644. /*******************ROTATION FUNCTIONS**********************/
  1645. /**
  1646. *rotate 1 degree at a time
  1647. **/
  1648. RichDrawEditor.prototype.fineRotateSelection=function(angle){
  1649.     if(this.selected==null){
  1650.     setHelp("Please select a shape to rotate");
  1651.     return false;
  1652.     }
  1653.     //this.selectedBounds = this.renderer.bounds(this.selected);
  1654.     this.renderer.fineRotateSelection(this.selected,angle);
  1655.     this.renderer.moveLineWithShape(this.selected);
  1656.     this.renderer.updateTracker(this.selected);
  1657.     
  1658.     this.selectedBounds = this.renderer.bounds(this.selected);
  1659. }
  1660.  
  1661. /**
  1662. * this method obtains the actual number of degrees to rotate by, renderer performs the actual rotation
  1663. *@param snappedX (currentX)
  1664. *@param snappedY (currentY)
  1665. *@param mouseDownX
  1666. *@param mouseDownY
  1667. **/
  1668. RichDrawEditor.prototype.processRotate=function(shape,snappedX,snappedY,mouseDownX,mouseDownY){
  1669.     var rect=this.renderer.bounds(shape);
  1670.     var centerX=(rect['x']*1)+(rect['width']/2);
  1671.     var centerY=(rect['y']*1)+(rect['height']/2);
  1672.     //first translate snapped x and y to origin
  1673.     var transX=snappedX-centerX;
  1674.     var transY=snappedY-centerY;
  1675.     //now we are at origin, our arbitrary point would be 0,-10
  1676.     //now take the dot product
  1677.     var adotb=(transX*0)+(transY*(-10));
  1678.     //now cros product |A|*|B|=sqrt((x1square+y1square))*sqrt((x2square+y2square));
  1679.     //we know sqrt((x1square+y1square))=10
  1680.     var acrossb=(10)*Math.sqrt((transX*transX)+(transY*transY));
  1681.     var theta=adotb/acrossb;
  1682.     theta=Math.acos(theta);
  1683.     theta=rad2Deg(theta)
  1684.     //if in quadrant 3 or 4
  1685.     if(transX<=0)theta=360-theta;
  1686.     
  1687.     this.renderer.rotate(this.selected,Math.round(theta));
  1688.     
  1689.     
  1690. }
  1691. /******************* END ROTATION FUNCTIONS**********************/
  1692.  
  1693. /**
  1694. *basically when a shape is has a mouse hit...select it. If we are in text edit mode,
  1695. *do nothing, just return;
  1696. *@param the event
  1697. **/
  1698. RichDrawEditor.prototype.onHit = function(event) {
  1699.   if(this.textEditMode){
  1700.           return;
  1701.   }
  1702.  
  1703.   if (this.mode == 'select') {
  1704.     this.unselect();
  1705.     var source=Event.element(event);
  1706.     this.select(this.renderer.getShapeFromEventSource(source));
  1707.     this.selectedBounds = this.renderer.bounds(this.selected);
  1708.     var offset = Position.cumulativeOffset(this.container);
  1709.     this.mouseDownX = Math.round((Event.pointerX(event) - offset[0]) / this.gridX) * this.gridX;
  1710.     this.mouseDownY = Math.round((Event.pointerY(event) - offset[1]) / this.gridY) * this.gridY;
  1711.     Event.observe(this.container, "mousemove", this.onDragListener);  
  1712.   }
  1713. };
  1714. /**
  1715. * update the properties box with shape or page info
  1716. * @param the shape
  1717. **/
  1718. RichDrawEditor.prototype.updateShapeInfo=function(selected){
  1719.     var rect=new Object();
  1720.     if(selected==null){
  1721.         //show page properties
  1722.         rect['width'] =  this.width;
  1723.         rect['height'] = this.height;
  1724.         this.pageProps.width.value=rect['width'];
  1725.         this.pageProps.height.value=rect['height'];
  1726.         
  1727.         this.shapeProps.table.style.visibility="hidden";
  1728.         this.shapeProps.table.style.display="none";
  1729.         this.pageProps.table.style.visibility="visible";
  1730.         this.pageProps.table.style.display="";
  1731.         this.lineProps.table.style.visibility="hidden";
  1732.         this.lineProps.table.style.display="none";
  1733.     }
  1734.     else{
  1735.         
  1736.         rect=this.renderer.bounds(selected);
  1737.         //this is a shape
  1738.         if(!this.renderer.isConnector(selected)){
  1739.             rect['x']=(rect['x']*(1.0/this.zoom)).toFixed(0);
  1740.             rect['y']=(rect['y']*(1.0/this.zoom)).toFixed(0);
  1741.             rect['width']=(rect['width']*(1.0/this.zoom)).toFixed(0);
  1742.             rect['height']=(rect['height']*(1.0/this.zoom)).toFixed(0);
  1743.             this.shapeProps.width.value=rect['width'];
  1744.                this.shapeProps.height.value=rect['height'];
  1745.             this.shapeProps.x.value=rect['x'];
  1746.             this.shapeProps.y.value=rect['y'];    
  1747.                this.shapeProps.rotation.value=rect['rotation'];
  1748.             this.shapeProps.table.style.visibility="visible";
  1749.             this.shapeProps.table.style.display="";
  1750.             this.lineProps.table.style.visibility="hidden";
  1751.             this.lineProps.table.style.display="none";
  1752.             this.pageProps.table.style.visibility="hidden";
  1753.             this.pageProps.table.style.display="none";
  1754.         }
  1755.         else{
  1756.             //its a connector
  1757.             rect['x']=(rect['x']*(1.0/this.zoom)).toFixed(0);
  1758.             rect['y']=(rect['y']*(1.0/this.zoom)).toFixed(0);
  1759.             rect['x2']=(rect['x2']*(1.0/this.zoom)).toFixed(0);
  1760.             rect['y2']=(rect['y2']*(1.0/this.zoom)).toFixed(0);
  1761.             this.lineProps.x1.innerHTML=rect['x'];
  1762.             this.lineProps.x2.innerHTML=rect['x2'];
  1763.             this.lineProps.y1.innerHTML=rect['y'];
  1764.             this.lineProps.y2.innerHTML=rect['y2'];
  1765.             this.lineProps.type.innerHTML=rect['type'];
  1766.             this.shapeProps.table.style.visibility="hidden";
  1767.             this.shapeProps.table.style.display="none";
  1768.             this.lineProps.table.style.visibility="visible";
  1769.             this.lineProps.table.style.display="";
  1770.             this.pageProps.table.style.visibility="hidden";
  1771.             this.pageProps.table.style.display="none";
  1772.         
  1773.         }
  1774.     }
  1775.     
  1776. };
  1777. /**
  1778. * append a cumulate draw specific page attribute to the save data
  1779. **/
  1780. RichDrawEditor.prototype.appendPageAttribute=function(div,attribute){
  1781.     this.renderer.appendPageAttribute(div,attribute);
  1782. }
  1783. /**
  1784. *get the vml/svg data embedded in the richdraw editor
  1785. **/
  1786. RichDrawEditor.prototype.getRealData=function(){
  1787.     return this.renderer.getRealData();
  1788. }
  1789. /**
  1790. *take the response text and return valid data from it
  1791. **/
  1792. RichDrawEditor.prototype.getValidDocumentFromResponse=function(response){
  1793.     return this.renderer.getValidDocumentFromResponse(response);
  1794.  
  1795. }
  1796. /**
  1797. *load palette, does this really belong in the editor?
  1798. **/
  1799. RichDrawEditor.prototype.loadPalette=function(id){
  1800.     
  1801.     var object=this.renderer.loadXML("shapes/palettes/"+id+".xml");
  1802.     
  1803.     return object.getElementsByTagName("palette")[0];
  1804.  
  1805. }
  1806. /**
  1807. *method to update the shape properties, take zoom factor into account here and also
  1808. *move any connectors attached to the shape
  1809. **/
  1810. RichDrawEditor.prototype.updateShape=function(width,height,x,y,rotation){
  1811.     
  1812.     if(this.selected){
  1813.         var rect=this.selected;
  1814.         width=(width*(this.zoom/1.0)).toFixed(0);
  1815.         height=(height*(this.zoom/1.0)).toFixed(0);
  1816.         x=(x*(this.zoom/1.0)).toFixed(0);
  1817.         y=(y*(this.zoom/1.0)).toFixed(0);
  1818.         this.renderer.setWidth(this.selected,width);
  1819.         this.renderer.setHeight(this.selected,height);
  1820.         this.renderer.setX(this.selected,x);
  1821.         this.renderer.setY(this.selected,y);    
  1822.         this.renderer.setRotation(this.selected,rotation);
  1823.         this.renderer.updateTracker(this.selected);
  1824.         this.renderer.moveLineWithShape(this.selected);
  1825.         this.clearShapeText(this.selected);
  1826.         this.resetShapeText(this.selected);
  1827.         
  1828.     } else{
  1829.         setHelp("Please select a shape to update");
  1830.     }
  1831. }
  1832.  
  1833. /**
  1834. *utility function to convert rad to degrees
  1835. **/
  1836.  
  1837. function rad2Deg(angle){
  1838.     return angle * (180 / Math.PI);
  1839. }
  1840.  
  1841. /**
  1842. *create a unique id for shapes
  1843. **/
  1844. function createUUID()
  1845. {
  1846.   return [4, 2, 2, 2, 6].map(function(length) {
  1847.     var uuidpart = "";
  1848.     for (var i=0; i<length; i++) {
  1849.       var uuidchar = parseInt((Math.random() * 256)).toString(16);
  1850.       if (uuidchar.length == 1)
  1851.         uuidchar = "0" + uuidchar;
  1852.       uuidpart += uuidchar;
  1853.     }
  1854.     return uuidpart;
  1855.   }).join('-');
  1856. }
  1857.  
  1858. function show(object){document.getElementById(object).style.visibility='visible';document.getElementById(object).style.display='';}
  1859.  
  1860. function hide(object){document.getElementById(object).style.visibility='hidden';document.getElementById(object).style.display='none';}
  1861.  
  1862.  
  1863. RichDrawEditor.prototype.setUser=function(aUser){
  1864. this.iUser=aUser;
  1865. }
  1866.  
  1867. RichDrawEditor.prototype.handleRemoteCommand=function(param)
  1868. {
  1869.     var name = param.substr(0,param.indexOf(" "));
  1870.     var remoteData = param.substr(param.indexOf(" ")+1);
  1871.  
  1872.     var command = remoteData.substring(0,3);
  1873.     var content = remoteData.substring(4);
  1874.     if (command=="ann")
  1875.     {
  1876.         //announce start of a drawing
  1877.         insertInvitation(name);
  1878.     }
  1879.     else if (command=="stp")
  1880.     {
  1881.         //announce end of a drawing
  1882.         removeInvitation(name);
  1883.         gApplication.removePeer(name);
  1884.     }
  1885.     else if (command=="con")
  1886.     {
  1887.         //connect from user
  1888.         gApplication.sendPeerList(name);
  1889.         sendCurrentState(name);
  1890.         gApplication.addPeer(name);
  1891.     }
  1892.     else if (command=="aus")
  1893.     {
  1894.         //add user
  1895.         gApplication.addPeer(content);
  1896.     }
  1897.     else if (command=="rus")
  1898.     {
  1899.         //add user
  1900.         gApplication.removePeer(name);
  1901.     }
  1902.     else if (command=="loa")
  1903.     {
  1904.         loadData(content);
  1905.     }
  1906.     else if (command=="cpy")
  1907.     {
  1908.         var node=this.renderer.paste(content,true);
  1909.         //add listener to added child
  1910.         this.addNewShapeListeners(node);
  1911.         this.clipboard=this.renderer.copy(node);
  1912.         return node;
  1913.     }
  1914.     else if (command=="cmd")
  1915.     {
  1916.         var temp = content.split(" ");
  1917.         var oldID = null;
  1918.         if (this.selected)
  1919.             oldID=this.selected.id
  1920.         if (temp[2])
  1921.             this.selected = $(temp[2])
  1922.  
  1923.         if (temp[0]=="zoom")
  1924.         {
  1925.             this.externaleditCommand(temp[0], temp[1], true);
  1926.             $('_zoomValue').innerHTML=(c.getZoom()*100).toFixed(0)+"%";
  1927.         }
  1928.         else if (temp[0]=="fontFamily")
  1929.         {
  1930.             if (temp.length==5)
  1931.             {
  1932.                 this.selected = $(temp[4])
  1933.                 this.externaleditCommand(temp[0], temp[1] + " " + temp[2] + " " + temp[3], true);
  1934.             }
  1935.             else if (temp.length==4)
  1936.             {
  1937.                 this.selected = $(temp[3])
  1938.                 this.externaleditCommand(temp[0], temp[1] + " " + temp[2], true);
  1939.             }
  1940.             else
  1941.                 this.externaleditCommand(temp[0], temp[1], true);
  1942.         }
  1943.         else if (temp[0]=="fillcolor")
  1944.         {
  1945.             this.externaleditCommand(temp[0], temp[1], true);
  1946.         }
  1947.         else if (temp[0]=="linecolor")
  1948.         {
  1949.             this.externaleditCommand(temp[0], temp[1], true);
  1950.         }
  1951.         else if (temp[0]=="linewidth")
  1952.         {
  1953.             this.externaleditCommand(temp[0], temp[1], true);
  1954.         }
  1955.         else if (temp[0]=="linedashstyle")
  1956.         {
  1957.             this.externaleditCommand(temp[0], temp[1], true);
  1958.         }
  1959.         else if (temp[0]=="opacity")
  1960.         {
  1961.             this.externaleditCommand(temp[0], temp[1], true);
  1962.         }
  1963.         else if (temp[0]=="shadow")
  1964.         {
  1965.             this.externaleditCommand(temp[0], temp[1], true);
  1966.         }
  1967.         else if (temp[0]=="gradient")
  1968.         {
  1969.             this.externaleditCommand(temp[0], temp[1], true);
  1970.         }
  1971.         else if (temp[0]=="fontSize")
  1972.         {
  1973.             this.externaleditCommand(temp[0], temp[1], true);
  1974.         }
  1975.         else if (temp[0]=="fontColor")
  1976.         {
  1977.             this.externaleditCommand(temp[0], temp[1], true);
  1978.         }
  1979.         else if (temp[0]=="bold")
  1980.         {
  1981.             this.externaleditCommand(temp[0], temp[1], true);
  1982.         }
  1983.         else if (temp[0]=="italic")
  1984.         {
  1985.             this.externaleditCommand(temp[0], temp[1], true);
  1986.         }
  1987.         else if (temp[0]=="align")
  1988.         {
  1989.             this.externaleditCommand(temp[0], temp[1], true);
  1990.         }
  1991.         else if (temp[0]=="bringtofront")
  1992.         {
  1993.             this.bringToFront();
  1994.         }
  1995.         else if (temp[0]=="sendtoback")
  1996.         {
  1997.             this.sendToBack();
  1998.         }
  1999.         else if (temp[0]=="reset")
  2000.         {
  2001.             this.removeAll();
  2002.             this.setPageSize(this.DEFAULT_PAGE_WIDTH,this.DEFAULT_PAGE_HEIGHT);
  2003.         }
  2004.         else if (temp[0]=="deleteSelection")
  2005.         {
  2006.             this.deleteSelection();
  2007.         }
  2008.         else if (temp[0]=="txt")
  2009.         {
  2010.             var newtext = remoteData.substring(9+temp[1].length+temp[2].length);
  2011.             
  2012.             var shapeFont=this.renderer.getFont(this.selected);
  2013.             this.renderer.setShapeText(this.selected,newtext,this.font,false,shapeFont,this.zoom);
  2014.         }
  2015.         else if (temp[0]=="grid")
  2016.         {
  2017.             if(temp[0]=='on')
  2018.             {
  2019.                 $('_page').style.backgroundImage="url(images/grid.jpg)";
  2020.             }
  2021.             else{
  2022.                 $('_page').style.backgroundImage="";
  2023.             }
  2024.         }
  2025.  
  2026.         if (oldID)
  2027.             this.select($(oldID));
  2028.     }
  2029.     
  2030.     if (command=="mvs")
  2031.     {
  2032.         var oldID = null;
  2033.         if (this.selected)
  2034.             oldID=this.selected.id
  2035.         //moving a shape
  2036.         var temp = content.split(" ");
  2037.         this.selected = $(temp[0]);
  2038.         if (this.selected)
  2039.             this.updateShape(temp[1], temp[2], temp[3], temp[4], temp[5]);
  2040.         if (oldID)
  2041.             this.select($(oldID));
  2042.     }
  2043.     else if (command=="mvc")
  2044.     {
  2045.         //moving a connector
  2046.     }
  2047.     else if (command=="pgs")
  2048.     {
  2049.         //set page size
  2050.         var temp = content.split(" ");
  2051.         this.setPageSize(temp[0],temp[1]);
  2052.     }
  2053. }
  2054.  
  2055. function transmit(aUser, aApplication, aMessage)
  2056. {
  2057.     //loop through all users and transmit to them
  2058.     if (typeof(window.external)!="undefined" && typeof(window.external.transmit)!="undefined")
  2059.         window.external.transmit(aUser, aApplication, aMessage);
  2060. }
  2061.  
  2062. //Application handling
  2063. function Application()
  2064. {
  2065.     this.reset();
  2066. }
  2067.  
  2068. Application.prototype.reset=function()
  2069. {
  2070.     this.iPeers=new Array();
  2071.     this.iSource=false;
  2072.     this.iViewing="";
  2073. }
  2074.  
  2075. Application.prototype.broadcast=function(application, message)
  2076. {
  2077.     if (typeof(window.external)!="undefined" && typeof(window.external.broadcast)!="undefined")
  2078.         window.external.broadcast(application, message);
  2079. }
  2080.  
  2081. Application.prototype.transmit=function(application, message)
  2082. {
  2083.     //loop through all users and transmit to them
  2084.     for (var i=0; i < this.iPeers.length; i++)
  2085.     {
  2086.         if (typeof(window.external)!="undefined" && typeof(window.external.transmit)!="undefined")
  2087.             window.external.transmit(this.iPeers[i].iName, application, message);
  2088.     }
  2089. }
  2090.  
  2091. Application.prototype.sendPeerList=function(aName)
  2092. {
  2093.     for (var i=0; i < this.iPeers.length; i++)
  2094.     {
  2095.         if (typeof(window.external)!="undefined" && typeof(window.external.transmit)!="undefined")
  2096.             window.external.transmit(aName, "w", "aus " + this.iPeers[i].iName);
  2097.     }
  2098. }
  2099.  
  2100. Application.prototype.addPeer=function(aName)
  2101. {
  2102.     this.iPeers[this.iPeers.length] = new Peer(aName);
  2103.     insertParticipant(aName);
  2104. }
  2105.  
  2106. Application.prototype.checkPeerExist=function(aName)
  2107. {
  2108.     for (var i = 0; i < this.iPeers.length; i++)
  2109.     {
  2110.         if (this.iPeers[i].iName == aName)
  2111.             return true;
  2112.     }
  2113.     return false;
  2114. }
  2115.  
  2116. Application.prototype.removePeer=function(aName)
  2117. {
  2118.     removeParticipant(aName);
  2119.     for (var i = 0; i < this.iPeers.length; i++)
  2120.     if (this.iPeers[i].iName == aName)
  2121.     {
  2122.         this.iPeers.splice(i,1);
  2123.         return;
  2124.     }
  2125. }
  2126.  
  2127. function Peer(aName)
  2128. {
  2129.     this.iName=aName;
  2130. }
  2131.  
  2132. var gApplication;
  2133.  
  2134. //announce the drawing to the rest of the workspace.
  2135. function announce()
  2136. {
  2137.     if (gApplication.iSource)
  2138.     {
  2139.         gApplication.broadcast('w', "ann draw");
  2140.         if (iConnectionMode!="Private")
  2141.             setTimeout('announce()',60000);
  2142.     }
  2143.     else
  2144.     {
  2145.         gApplication.broadcast('w', "stp draw");
  2146.     }
  2147. }
  2148.  
  2149. function initDrawing()
  2150. {
  2151.     if (!gApplication.iSource)
  2152.     {
  2153.         stopDrawing();
  2154.         gApplication.iSource = true;
  2155.         announce();
  2156.     }
  2157.     Activate('w');
  2158.     hide("startdrawing");
  2159.     show("drawparticipant");
  2160. }
  2161.  
  2162. function stopDrawing()
  2163. {
  2164.     if (gApplication.iSource)
  2165.     {
  2166.         gApplication.reset();
  2167.         announce();
  2168.     }
  2169.     else
  2170.     {
  2171.         this.iViewing = "";
  2172.         gApplication.transmit('w', "rus ");
  2173.         gApplication.reset();
  2174.         var invitelist=document.getElementById("Particips");
  2175.         invitelist.innerHTML="";
  2176.     }    
  2177.     hide("drawparticipant");
  2178.     Activate('c');
  2179.     show("startdrawing");
  2180. }
  2181.  
  2182. function sendCurrentState(aName)
  2183. {
  2184. /*    Try.these(c.renderer.savePolyLinePaths());
  2185.     dummy=c.getRealData();
  2186.     transmit(aName, 'w', "loa " + dummy);
  2187. */
  2188.     var format=c.renderer.EXTENSION;
  2189.     var dummy=getAllData(format);
  2190.     var data=(dummy.innerHTML)?dummy.innerHTML:dummy.xml;
  2191.     transmit(aName, 'w', "loa " + data);
  2192. }
  2193.  
  2194. function loadData(content)
  2195. {
  2196.     if(content){
  2197.         var div=c.getValidDocumentFromResponse(content)
  2198.         c.open(div);
  2199.     }
  2200. }
  2201.  
  2202. function viewDrawing(aName)
  2203. {
  2204.     if (aName!=this.iViewing)
  2205.     {
  2206.         if (this.iViewing)
  2207.         {
  2208.             //we are viewing somebody, disconnect from them before connecting
  2209.         }
  2210.         this.iViewing=aName;
  2211.     
  2212.         if (!gApplication.checkPeerExist(aName))
  2213.         {
  2214.             gApplication.addPeer(aName);
  2215.             gApplication.iSource=false;
  2216.             gApplication.transmit('w', "con " + aName);
  2217.         }
  2218.         hide("startdrawing");
  2219.         show("drawparticipant");
  2220.     }
  2221.         Activate("w");
  2222. }
  2223.  
  2224. function insertInvitation(aUser, aMessage)
  2225. {
  2226.     var invitelist = document.getElementById("Invites");
  2227.     var existingItem = document.getElementById('invite' + aUser);
  2228.     if (!existingItem)
  2229.     {
  2230.         var listElement = document.createElement("li");
  2231.         listElement.setAttribute('id', 'invite' + aUser);
  2232.         var newlink = document.createElement('a');
  2233.         newlink.setAttribute('href', 'javascript:viewDrawing("' + aUser + '")');
  2234.         var text = document.createTextNode(aUser);
  2235.         newlink.appendChild(text);
  2236.         listElement.appendChild(newlink);
  2237.         invitelist.appendChild(listElement);
  2238.         if (typeof(window.external)!="undefined" && typeof(window.external.observe)!="undefined")
  2239.             window.external.observe(aUser);
  2240.             
  2241.         var chatElement = document.createElement("div");
  2242.         var newlink = document.createElement('a');
  2243.         newlink.setAttribute('href', 'javascript:viewDrawing("' + aUser + '")');
  2244.         var text = document.createTextNode("Click here");
  2245.         newlink.appendChild(text);
  2246.         var text2 = document.createTextNode(aUser + " started a shared whiteboard. ");
  2247.         var text3 = document.createTextNode(" to view or take part in the drawing. ");
  2248.         chatElement.appendChild(text2);
  2249.         chatElement.appendChild(newlink);
  2250.         chatElement.appendChild(text3);
  2251.  
  2252.         var chat = document.getElementById("c");
  2253.         chat.appendChild(chatElement);
  2254.     }
  2255. }
  2256.  
  2257. function removeInvitation(aUser)
  2258. {
  2259.     var invitelist = document.getElementById("Invites");
  2260.     var removeItem = document.getElementById('invite' + aUser);
  2261.     if (removeItem)
  2262.     {
  2263.         invitelist.removeChild(removeItem);
  2264.         if (typeof(window.external)!="undefined" && typeof(window.external.ignore)!="undefined")
  2265.             window.external.ignore(aUser);
  2266.     }
  2267. }
  2268.  
  2269. function insertParticipant(aUser, aMessage)
  2270. {
  2271.     var invitelist = document.getElementById("Particips");
  2272.     var existingItem = document.getElementById('participant' + aUser);
  2273.     if(!existingItem)
  2274.     {
  2275.         var listElement = document.createElement("li");
  2276.         listElement.setAttribute('id', 'participant' + aUser);
  2277.         var text = document.createTextNode(aUser);
  2278.         listElement.appendChild(text);
  2279.         invitelist.appendChild(listElement);
  2280.         if (typeof(window.external)!="undefined" && typeof(window.external.observe)!="undefined")
  2281.             window.external.observe(aUser);
  2282.     }
  2283. }
  2284.  
  2285. function removeParticipant(aUser)
  2286. {
  2287.     var invitelist = document.getElementById("Particips");
  2288.     var removeItem = document.getElementById('participant' + aUser);
  2289.     if (removeItem)
  2290.     {
  2291.         invitelist.removeChild(removeItem);
  2292.         if (typeof(window.external)!="undefined" && typeof(window.external.ignore)!="undefined")
  2293.             window.external.ignore(aUser);
  2294.     }
  2295. }
  2296.  
  2297. function userLeft(aUser)
  2298. {
  2299.     gApplication.removePeer(aUser);
  2300.     removeInvitation(aUser);
  2301. }
  2302.